<template>
	<div>
		<div class="mapSelect">
			<div class="mapSelectShow" @click="tipShowBtn('bottom')">{{bottomMian}}</div>
			<div class="mapSelect-box">
				<div class="mapSelectItem" @click="mapSelectBtn(item,index)" v-for="(item,index) in mapSelect" :key="index+'mapSelect'">
					<div :class="{'mapSelectLeftActive':screenArr.includes(index)}"></div>
					<div class="mapSelectRight">{{item.name}}</div>
				</div>
			</div>
		</div>
		<div class="mapLeft">
			<div class="mapLeftShow" @click="tipShowBtn('left')">{{leftMain}}</div>
			
			<!-- 一表六实 -->
			<div class="mapLeftTop">
				<div class="mapLeftTopTitle">
					一表六实
				</div>
				<div class="mapLeftTopList">
					<div class="mapLeftTopListItem" v-for="(item,index) in mapLeftTopList" :key="index+'ListItem'">
						<div class="mapLeftTopListItemIcon"></div>
						<div class="mapLeftTopListItemMain">
							<div class="mapLeftTopListItemMainTop">{{item.name}}</div>
							<div class="mapLeftTopListItemMainBotttom">{{item.num}}</div>
						</div>
					</div>
				</div>
			</div>
			<!--  -->
			
			
		</div>
		<div class="mapRight">
			<div class="mapRightShow" @click="tipShowBtn('right')">{{rightMain}}</div>
			<div class="mapRightTotal">感知数量总量 <span>{{total}}</span></div>
			<div class="mapRightWeek">
				<div class="mapRightWeekTop">
					<div @click="WeekTopBtn(index)" v-for="(item,index) in WeekTop" :class="{'active':WeekTopIndex==index}"  :key="index+'WeekTopBtn'">
						{{item}}
					</div>
				</div>
				<div id="myChart1"></div>
			</div>
			<div class="mapRightAdd">
				<div class="mapRightAddTotal">今日感知增量 <span>{{toDayTotal}}</span></div>
				<div class="mapRightAddMain">
					<div class="mapRightAddMainLeft">
						
					</div>
					<div class="mapRightAddMainRight">
						<div v-for="(item,index) in mapRightAdd" :key="index+'mapadd'" class="mapRightAddMainRightList">
							<img src="" alt="">
							<div :style="border()" >{{item.name}}:{{item.num}}</div>
						</div>
					</div>
				</div>
			</div>
			<div id="myChart2"></div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				// 左侧挂在dom
				leftShow:true,
				leftMain:'回去',
				// 右侧挂在dom
				rightShow:true,
				rightMain:'回去',
				// 复选框
				bottomShow:true,
				bottomMian:'向下',
				mapSelect:[
					{
						name:'小区',
						flg:false,
					},{
						name:'动态感知',
						flg:false,
					},{
						name:'实有力量',
						flg:false,
					},{
						name:'实有单位',
						flg:false,
					},{
						name:'实有安防设施',
						flg:false,
					},{
						name:'小区出入口',
						flg:false,
					},{
						name:'井盖',
						flg:false,
					},
				],
				screenArr:[],
				mapSelectIndex:0,
				// 一表六实
				mapLeftTopList:[
					{
						name:'实有人口',
						num:'18.466',
						icon:'',
					},{
						name:'实有房屋',
						num:'9.5466',
						icon:'',
					},{
						name:'实有单位',
						num:'36',
						icon:'',
					},{
						name:'实有安防设施',
						num:'3.466',
						icon:'',
					},{
						name:'实有力量/装备',
						num:'721/94',
						icon:'',
					},{
						name:'实有警情事件',
						num:'413',
						icon:'',
					},
				],
				mapRightAdd:[
					{
						name:'过车感知',
						num:0,
					},{
						name:'开门记录',
						num:0,
					},{
						name:'人脸抓拍',
						num:551,
					},{
						name:'事件感知',
						num:0,
					},{
						name:'MAC感知',
						num:0,
					},
				],
				WeekTop:['小区','类型'],
				WeekTopIndex:0,
				total:'76.085.42',
				toDayTotal:166,
				navList:['特殊人群','当前告警','xxxxx'],
				
				num:null,
			}
		},
		mounted() {
			this.$nextTick(function(){
				document.querySelector('.mapLeft').style.left='10px'
				document.querySelector('.mapRight').style.right='10px'
				document.querySelector('.mapSelect').style.bottom='50px'	
				
				this.drawLine1();
				this.drawLine2()
			})
		},
		methods:{
			// 复选框
			mapSelectBtn(item,i){
				
				// this.mapSelectIndex=index
				if(this.screenArr.includes(i)){
				    //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
				    //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
				    this.screenArr=this.screenArr.filter(function (ele){return ele != i;});
					// 取消选中
				}else{
					// 选中时
					console.log(item.name)
				    this.screenArr.push(i);
				} 
			},
			drawLine1(){
				var echarts = require("echarts");
				var option1 = {
					title:{
						text: '一周感知数量统计', 
						textStyle:{               
						    color:'#fff',
							fontSize:12,
						},           
						padding:[20,0,10,10]  
					},
					color: ['rgba(255,255,255,.6)'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					       
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							axisTick: {
								alignWithLabel: true,
								show:false,
							},
							
							axisLine:{
								lineStyle:{
							        color:'#fff',
							        width:1,
									
							    }
							},			        
						}
					],
					yAxis: [	
						{
							             
							type: 'value',
							axisTick: {
								alignWithLabel: false,
								show:false,
							},
							axisLine:{
								lineStyle:{
								    color:'#fff',
								    width:0
								}
							},		       
						}
					],
					series: [
						{
							name: '直接访问',
							type: 'bar',
							barWidth: '60%',
							data: [10, 52, 200, 334, 390, 330, 220]
						}
					]
				};
				var myChart1 = echarts.init(document.getElementById("myChart1"));
				myChart1.setOption(option1);
				window.addEventListener("resize", function() {
				  myChart1.resize();
				});
			},
			drawLine2(){
				var echarts = require("echarts");
				var option2 = {
					title:{
						text: 'MAC感知实时统计', 
						textStyle:{               
						    color:'#fff',
							fontSize:12,
						},           
						padding:[20,0,10,10]  
					},
					color: ['rgba(255,255,255,.6)'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					       
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							axisTick: {
								alignWithLabel: true,
								show:false,
							},
							
							axisLine:{
								lineStyle:{
							        color:'#fff',
							        width:1,
									
							    }
							},			        
						}
					],
					yAxis: [	
						{
							             
							type: 'value',
							axisTick: {
								alignWithLabel: false,
								show:false,
							},
							axisLine:{
								lineStyle:{
								    color:'#fff',
								    width:0
								}
							},		       
						}
					],
					series: [
						{
							name: '直接访问',
							type: 'bar',
							barWidth: '60%',
							data: [10, 52, 200, 334, 390, 330, 220]
						}
					]
				};
				var myChart2 = echarts.init(document.getElementById("myChart2"));
				myChart2.setOption(option2);
				window.addEventListener("resize", function() {
				  myChart2.resize();
				});
			},
			// 随机色
			border(){
				var r=Math.floor(Math.random()*256);
				var g=Math.floor(Math.random()*256);
				var b=Math.floor(Math.random()*256);
				return {
					'border-bottom':"solid 1px rgb("+r+','+g+','+b+")"
				};
			},
			WeekTopBtn(index){
				this.WeekTopIndex=index
			},
			// 回去
			tipShowBtn(num){
				if(num=='left'){
					if(this.leftShow==false){
						this.leftShow=true
						this.leftMain='回去'
						document.querySelector('.mapLeft').style.left='10px'
					}else{
						this.leftShow=false
						this.leftMain='出来'
						document.querySelector('.mapLeft').style.left='-350px'
					}
				}else if(num=='right'){
					if(this.rightShow==false){
						this.rightShow=true
						this.rightMain='回去'
						document.querySelector('.mapRight').style.right='10px'
					}else{
						this.rightShow=false
						this.rightMain='出来'
						document.querySelector('.mapRight').style.right='-350px'
					}
				}else if(num=='bottom'){
					
					if(this.bottomShow==false){
						this.bottomShow=true
						this.bottomMian='向下'
						document.querySelector('.mapSelect').style.bottom='50px'
					}else{
						this.bottomShow=false
						this.bottomMian='向上'
						document.querySelector('.mapSelect').style.bottom='-40px'
					}
				}
			},
		},
	}
</script>

<style scoped="">
	html,body{
		width: 100%;
		overflow: hidden;
	}
	.mapSelect{
		background-color: rgba(0,0,0,0.5);
		border: 1px solid #fff;
		box-shadow: 3px 4px 3px 0px #fff;
		position: absolute;
		bottom:-40px;
		left: 50%;
		margin-left: -400px;
		width: 800px;
		box-sizing: border-box;
		border-radius: 5px;
		padding: 10px;
		z-index: 99;
		transition: 1s;
	}
	.mapSelectShow{
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
		color: #fff;
		cursor: pointer;
	}
	.mapSelect-box{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
	}
	.mapSelectItem{
		color: #fff;
		display: flex;
		cursor: pointer;
		margin-right: 20px;
		height: 30px;
	}
	.mapSelectItem>div:first-of-type{
		width: 20px;
		height:20px;
		margin-right: 8px;
		border: #fff 1px solid;
	}
	.mapSelectLeftActive{
		width: 20px;
		height:20px;
		margin-right: 8px;
		background-color: #00cbcc;
	}
	.mapSelectRight{
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
	.mapLeft {
		  background-color: rgba(0,0,0,0.5);
	      border: 1px solid #fff;
	      box-shadow: 3px 4px 3px 0px #fff;
	      position: absolute;
	      top: 10px;
	      left: -350px;
		  width: 400px;
		  height:700px;
		  
		  box-sizing: border-box;
	      border-radius: 5px;
	      overflow: hidden;
	      padding: 30px 10px;
		  box-sizing: border-box;
	      z-index: 99;
		  transition: 1s;
	  }
	.mapLeftShow{
		width: 30px;
		height: 30px;
		position: absolute;
		background-color: rgb(13,76,144);
		border-radius: 50%;
		color: #fff;
		line-height: 30px;
		text-align: center;
		right: 5px;
		top: 5px;
		z-index: 99;
		cursor: pointer;	  
	}  
	.mapLeftTop{
		width: 100%;
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		background-image: linear-gradient(to right, rgba(38,146,255,0.6), rgba(38,146,255,0.2));
	}
	.mapLeftTopTitle{
		color: #fff;
		width: 100%;
		height: 40px;
		line-height: 40px;
	}
	.mapLeftTopList{
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap:wrap;
	}
	.mapLeftTopListItem{
		width: 48%;
		display: flex;
		margin-right: 2%;
		margin-bottom:4px;
	}
	.mapLeftTopListItemIcon{
		width: 40px;
		height: 40px;
		background-color: #fff;
		margin-right: 8px;
	}
	.mapLeftTopListItemMain{
		flex: 1;
	}
	.mapLeftTopListItemMainTop{
		font-size: 12px;
		color: #78e0fd;
		border-bottom: #72c3f8 solid 1px;
	}
	.mapLeftTopListItemMainBotttom{
		color: #fff;
		font-size: 14px;
		line-height: 30px;
	}
	/* 实有力量在线统计 */
	
	
	
	
	.mapRight {
		background-color: rgba(0,0,0,0.5);
	    border: 1px solid #fff;
	    box-shadow: 3px 4px 3px 0px #fff;
	    position: absolute;
	    top: 10px;
	    right: -350px;
		width: 400px;
		height:700px;
	    border-radius: 5px;
	    overflow: hidden;
	    padding: 30px 10px;
		box-sizing: border-box;
	    z-index: 99;
		transition: 1s;
		font-size: 12px;
	}	
	
	.mapRightShow{
		width: 30px;
		height: 30px;
		position: absolute;
		background-color: rgb(13,76,144);
		border-radius: 50%;
		color: #fff;
		line-height: 30px;
		text-align: center;
		left: 5px;
		top: 5px;
		z-index: 99;
		cursor: pointer;
	}
	.mapRightTotal{
		width: 100%;
		height: 50px;
		line-height: 50px;
		color: #fff;
		border-bottom: solid 1px #86b7b4;
	}
	.mapRightTotal span{
		color: #59c8c2;
		font-size: 24px;
		margin-left: 20px;
		font-weight: bold;
	}
	.mapRightWeek{
		width: 100%;
		height: auto;
	}
	.mapRightWeekTop{
		width:70px;
		height: 30px;
		display: flex;
		color: #fff;
		margin-top: 8px;
		border: #447caf solid 1px;
		cursor: pointer;
		position: absolute;
		right: 10px;
		z-index: 9999;
	}
	.mapRightWeekTop div{
		width: 50%;
		text-align: center;
		line-height: 30px;
	}
	.mapRightWeekTop div.active{
		
		background-color: rgba(17,67,130,0.6);
	}
	#myChart1{
		width: 100%;
		height: 180px;
		position: relative;
	}
	.mapRightAdd{
		width: 100%;
		height: auto;
	}
	.mapRightAddTotal{
		width: 100%;
		height: 50px;
		line-height: 50px;
		color: #fff;
		border-bottom: solid 1px #dea743;
	}
	.mapRightAddTotal span{
		color: #dea743;
		font-size: 24px;
		margin-left: 20px;
		font-weight: bold;
	}
	.mapRightAddMain{
		width: 100%;
		height: auto;
		display: flex;
		margin-top: 6px;
	}
	.mapRightAddMainLeft{
		width: 50%;
		
	}
	.mapRightAddMainRight{
		width: 50%;
		
	}
	.mapRightAddMainRightList{
		width: 100%;
		
		display: flex;
		background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
		padding-bottom: 6px;
	}
	.mapRightAddMainRightList img{
		width: 40px;
		height: 30px;
	}
	.mapRightAddMainRightList div{
		line-height: 30px;
		color: #fff;
		flex: 1;
	}
	#myChart2{
		width: 100%;
		height: 180px;
		
	}
</style>
